<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  ~   Copyright 1999-2016 Asiainfo Technologies(China),Inc.
  ~
  ~   Licensed under the Apache License, Version 2.0 (the "License");
  ~   you may not use this file except in compliance with the License.
  ~   You may obtain a copy of the License at
  ~
  ~        http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~   Unless required by applicable law or agreed to in writing, software
  ~   distributed under the License is distributed on an "AS IS" BASIS,
  ~   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~   See the License for the specific language governing permissions and
  ~   limitations under the License.
  ~
  --%>

<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
    <title>首页</title>
    <script src="${ctx}/assets/echarts/2.2.7/echarts-all.js"></script>
    <script>
        $(function () {

            $.post("${ctx}/redis-api/getClusters", {}, function(data) {
                if (data.success){
                    var clusters = data.result;
                    var clusterList = $('#cluster-list');
                    for (var i = 0; i < clusters.length; i++){
                        //$('#cluster-list').append('<li><a href="javascript:selectCluster('+clusters[i].id+',\''+clusters[i].clusterName+'\')"><i class="icon-code-fork"></i>'+clusters[i].clusterName+'</a></li>');
                        clusterList.append('<option value="'+clusters[i].id+'">'+clusters[i].clusterName+'</option>');
                    }

                    clusterList.selectpicker('refresh');
                    clusterList.on('hidden.bs.select', function(){
                        if ($(this).val() != ""){
                            selectCluster($(this).val());
                        }
                    });
                }
            });

        });

        function LineChart(dom){
            this.myChart = null;
            this.initChart = function (data) {
                this.myChart = echarts.init(dom);
                var this_ = this;
                $(window).resize(function(){
                    this_.myChart.resize();
                });
                var legendData = [];
                var seriesData = [];
                for (var key in data){
                    legendData.push(key);
                    seriesData.push({name: key, type: 'line', smooth: true, data:[0,0,0,0,0,0,0,0]});
                }
                var option = {
                    tooltip:{
                        trigger: 'axis'
                    },
                    grid: {x:50,y: 30, y2:20, x2:40, borderWidth:0},
                    legend: {
                        data:legendData
                    },
                    xAxis : [{
                        boundaryGap : false,
                        type : 'category',
                        axisLine : {show: false},
                        data : ['','','','','','','','']
                    }],
                    yAxis : [{
                        type : 'value',
                        axisLine : {show: false}
                    }],
                    series : seriesData
                };
                this.myChart.setOption(option, true);
            };
            this.addData = function(data){
                if (this.myChart == null){
                    this.initChart(data);
                }
                var _data = [];
                var i = 0;
                //var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
                var axisData = (new Date()).pattern("HH:mm:ss");
                for(var key in data){
                    if (i == 0){
                        _data.push([i, data[key], false, false, axisData]);
                    }else{
                        _data.push([i, data[key], false, false]);
                    }
                    i++;
                }
                this.myChart.addData(_data);
            }
        }

        function showChart(clusterId, chart, url, onComplete){
            setTimeout(function () {
                $.post(url, {clusterId: clusterId}, function (data) {
                    if (data.success) {
                        chart.addData(data.result);
                    }
                }, 'json').complete(onComplete);
            }, 100);
        }

        //var timeTicket;
        var iTime;
        function selectCluster(clusterId){
            /*
             clearInterval(timeTicket);
             showChart(clusterId, connectedClientsChart, '${ctx}/redis-api/getConnectedClients');
             showChart(clusterId, usedMemoryChart, '${ctx}/redis-api/getUsedMemory');
             showChart(clusterId, usedCpuUserChart, '${ctx}/redis-api/getUsedCpuUser');
             showChart(clusterId, usedCpuSysChart, '${ctx}/redis-api/getUsedCpuSys');
             timeTicket = setInterval(function () {
             showChart(clusterId, connectedClientsChart, '${ctx}/redis-api/getConnectedClients');
             showChart(clusterId, usedMemoryChart, '${ctx}/redis-api/getUsedMemory');
             showChart(clusterId, usedCpuUserChart, '${ctx}/redis-api/getUsedCpuUser');
             showChart(clusterId, usedCpuSysChart, '${ctx}/redis-api/getUsedCpuSys');
             }, 5000);
             */

            clearTimeout(iTime);
            var connectedClientsChart = new LineChart($("#connectedClients")[0]);
            var usedMemoryChart = new LineChart($("#usedMemory")[0]);
            var usedCpuUserChart = new LineChart($("#usedCpuUser")[0]);
            var usedCpuSysChart = new LineChart($("#usedCpuSys")[0]);

            var showAll = function(){
                $.post('${ctx}/redis-api/getInfo',{clusterId: clusterId, properties: 'connected_clients,used_memory,used_cpu_sys,used_cpu_user'}, function (data) {
                    if (data.success) {
                        connectedClientsChart.addData(data.result.connected_clients);
                        usedMemoryChart.addData(data.result.used_memory);
                        usedCpuUserChart.addData(data.result.used_cpu_user);
                        usedCpuSysChart.addData(data.result.used_cpu_sys);
                    }
                }, 'json').complete(function(){
                    iTime = setTimeout(function () {
                        showAll();
                    }, 5000);
                });
            }
            showAll();

            /*
            var connectedClientsUrl = '${ctx}/redis-api/getConnectedClients';
            var usedMemoryUrl = '${ctx}/redis-api/getUsedMemory';
            var usedCpuUserUrl = '${ctx}/redis-api/getUsedCpuUser';
            var usedCpuSysUrl = '${ctx}/redis-api/getUsedCpuSys';
            var showAll = function() {
                showChart(clusterId, connectedClientsChart, connectedClientsUrl, function () {
                    showChart(clusterId, usedMemoryChart, usedMemoryUrl, function () {
                        showChart(clusterId, usedCpuUserChart, usedCpuUserUrl, function () {
                            showChart(clusterId, usedCpuSysChart, usedCpuSysUrl, function () {
                                setTimeout(function(){
                                    showAll();
                                }, 5000);
                            });
                        });
                    });
                });
            };
            showAll();
            */

        }

    </script>
</head>

<body>

<div class="page-title">
    <div class="btn-group pull-right" style="margin-bottom: 0px">
        <select id="cluster-list" class="selectpicker show-tick" title="请选择集群" data-live-search="true" data-size="5">
        </select>
    </div>
    <h3>集群监控</h3>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="widget-container fluid-height">
            <div class="heading">
                <i class="icon-bar-chart"></i>客户端连接数
            </div>
            <div class="widget-content padded text-center">
                <div id="connectedClients" style="height:250px">

                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="widget-container fluid-height">
            <div class="heading">
                <i class="icon-bar-chart"></i>内存使用（单位：MB）
            </div>
            <div class="widget-content padded text-center">
                <div id="usedMemory" style="height:250px">

                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="widget-container fluid-height">
            <div class="heading">
                <i class="icon-bar-chart"></i>用户CPU使用
            </div>
            <div class="widget-content padded text-center">
                <div id="usedCpuUser" style="height:250px">

                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="widget-container fluid-height">
            <div class="heading">
                <i class="icon-bar-chart"></i>系统CPU使用
            </div>
            <div class="widget-content padded text-center">
                <div id="usedCpuSys" style="height:250px">

                </div>
            </div>
        </div>
    </div>
</div>



</body>
</html>
